<template>
	<view>
		<u-popup v-model="payshow" mode="bottom" height="600px" :mask-close-able="false">
			<view class="popup-title">
				<view class="close-img" @click="close">
					x
				</view>
				券券支付
			</view>
			<view class="popup-content" :style="{'backgroundImage':`url(${poprp})`}">
				<view class="popup-top">
					<text style="color: #ccc;">会员号：</text>{{phone}}
				</view>
				<canvas v-if="show" style="width: 200px;height: 200px;" id="qrcode" class="popup-img"
					canvas-id="qrcode"></canvas>
				<view class="popup-btn1" @click="reset">
					刷新二维码
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import UQRcode from '@/js_sdk/uqrcode/uqrcode.js'
	import {
		log
	} from 'util';

	export default {
		components: {

		},
		data() {
			return {
				capsuleTop: uni.getMenuButtonBoundingClientRect().top + 35.5 + 'px',
				icon: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member12.png',
				icon1: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member7.png',
				icon2: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member2.png',
				poprp: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/pay/bg1.png',
				show: false,
			}
		},
		onLoad() {

		},
		onReady() {},
		onShow() {

		},
		props: {
			payshow: {
				type: Boolean,
				default: false,
			},
			phone: {
				type: String,
				default: '',
			},
			url: {
				type: String,
				default: '',
			}
		},
		watch: {
			payshow(newvalue) {
				if (newvalue == true) {
					this.init();
					this.show = true;
				}
			}
		},
		methods: {
			init() {
				// 获取uQRCode实例
				var qr = new UQRcode();
				// 设置二维码内容
				qr.data = this.url;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 200;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			},
			reset() {
				this.$emit('reset');
			},
			close() {
				this.show = false;
				this.$emit('close');
			},
			memberfn() {
				this.shows = true;
			},
		}

	}
</script>

<style lang="scss" scoped>
	.popup-title {
		position: relative;
		text-align: center;
		margin: 30rpx auto;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 38rpx;
	}

	.popup-top {
		width: 100%;
		display: inline-block;
		overflow: hidden;
		margin: 92rpx auto 0;
		font-size: 40rpx;
		font-family: DIN;
		font-weight: bold;
		color: #000000;
		text-align: center;
	}

	.popup-img {
		margin: 99rpx auto 0;
		display: block;
	}

	.popup-content {
		margin: 20rpx auto 0;
		width: 666rpx;
		height: 1086rpx;
		background: no-repeat;
		background-size: 100% 100%;
	}

	.popup-btn1 {
		margin: 43rpx auto 0;
		width: 256rpx;
		height: 80rpx;
		background: #e1f7fc;
		border-radius: 40rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #34C8E8;
	}

	.popup-btn2 {
		margin: 43rpx auto 0;
		width: 256rpx;
		height: 80rpx;
		background: #fff3dd;
		border-radius: 40rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFB119;
	}

	.close-img {
		position: absolute;
		top: 10rpx;
		right: 20rpx;
		font-size: 70rpx;
		width: 40rpx;
		font-weight: 500;
		height: 40rpx;
	}
</style>